<template>
    <div class="card-wrap">
        <!-- <a-card v-if="loading" :bordered="false" hoverable>
            <slot name="skeleton"></slot>
        </a-card> -->
        <a-card :bordered="false" hoverable>
            <a-space align="start">
                <a-avatar
                    v-if="icon"
                    :size="24"
                    style="margin-right: 8px; background-color: #626aea"
                >
                    <icon-filter />
                </a-avatar>

                <a-card-meta>
                    <template #title>
                        <a-typography-text style="margin-right: 10px">
                            {{ title }}
                        </a-typography-text>
                        <div class="card-icon">
                            <a-link :hoverable="false"
                                ><chart-line-area
                                    theme="multi-color"
                                    size="16"
                                    :fill="[
                                        '#2F88FF',
                                        '#2F88FF',
                                        '#FFF',
                                        '#43CCF8',
                                    ]"
                                    @click="fnOpenChartDialog(spceName)"
                            /></a-link>
                        </div>
                    </template>

                    <template #description>
                        <p style="font-size: 26px">
                            {{ spceValue || '--' }}
                            <span style="font-size: 20px">
                                {{ spceUnit }}
                            </span>
                        </p>
                        <span>{{ occurredTime || '--' }}</span>
                    </template>
                </a-card-meta>
            </a-space>
        </a-card>
        <DialogChart ref="dialogChartRef" :title="chartDialogConfig.title">
        </DialogChart>
    </div>
</template>

<script lang="ts" setup>
    import { ChartLineArea } from '@icon-park/vue-next';
    import { nextTick, reactive, ref } from 'vue';
    import DialogChart from './dialog-chart.vue';

    const dialogChartRef = ref();
    const props = defineProps({
        loading: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            default: '',
        },
        deviceId: {
            type: Number,
            default: 0,
        },
        identifier: {
            type: String,
            default: '',
        },
        spceName: {
            type: String,
            default: '',
        },
        spceValue: {
            type: String,
            default: '',
        },
        spceUnit: {
            type: String,
            default: '',
        },
        occurredTime: {
            type: String,
            default: '',
        },
        icon: {
            type: String,
            default: '',
        },
        status: {
            type: Number,
            default: 0,
        },
    });
    const chartDialogConfig = reactive({
        title: '历史数据',
        occurredTime: undefined,
        specsUnit: '',
    });
    const fnOpenChartDialog = async () => {
        chartDialogConfig.title = `属性【${props.spceName}】历史数据`;
        const params = {
            identifier: props.identifier,
            deviceId: props.deviceId,
        };
        // console.log(params);
        nextTick(() => {
            dialogChartRef.value.open(params);
        });
    };
</script>

<style scoped lang="less">
    .card-wrap {
        height: 100%;
        border: 1px solid var(--color-neutral-3);
        border-radius: 4px;
        transition: all 0.3s;

        &:hover {
            transform: translateY(-4px);
            // box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
        }

        .card-icon {
            position: absolute;
            right: 10px;
            display: flex;
            align-items: center;
            line-height: 28px;
            //vertical-align: middle;
        }

        :deep(.arco-card) {
            height: 100%;
            border-radius: 4px;

            .arco-card-body {
                height: 100%;

                .arco-space {
                    width: 100%;
                    height: 100%;

                    .arco-space-item {
                        height: 100%;

                        &:last-child {
                            flex: 1;
                        }

                        .arco-card-meta {
                            display: flex;
                            flex-flow: column;
                            height: 100%;

                            .arco-card-meta-content {
                                flex: 1;

                                .arco-card-meta-description {
                                    margin-top: 8px;
                                    color: rgb(var(--gray-6));
                                    font-size: 12px;
                                    line-height: 20px;
                                }
                            }

                            .arco-card-meta-footer {
                                margin-top: 0;
                            }
                        }
                    }
                }
            }
        }

        :deep(.arco-card-meta-title) {
            display: flex;
            align-items: center;

            // To prevent the shaking
            line-height: 28px;
        }

        :deep(.arco-skeleton-line) {
            &:last-child {
                display: flex;
                justify-content: flex-end;
                margin-top: 20px;
            }
        }
    }
</style>
